<template>
  <div class="container">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item label="订单内容">
            <a-input allow-clear v-model="state.sd.orderData" placeholder="订单内容" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="开始日期">
            <a-date-picker allow-clear  v-model="state.sd.startDate" placeholder="开始日期" style="width: 100%;" value-format="YYYY-MM-DD"  />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="结束日期">
            <a-date-picker allow-clear  v-model="state.sd.endDate" placeholder="结束日期" style="width: 100%;" value-format="YYYY-MM-DD"  />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-space>
            <a-button type="primary" @click="searchSrmData">
              <template #icon><icon-search /></template>查询
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>

    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.srmDataObj.list">
      <template #columns>
        <a-table-column title="消息ID" data-index="orderid" width="150"></a-table-column>
        <a-table-column title="处理状态" data-index="statusname" width="150"></a-table-column>
        <a-table-column title="消息内容" data-index="msgdata"></a-table-column>
        <a-table-column title="错误内容" data-index="errormsg" width="400"></a-table-column>
        <a-table-column title="创建日期" width="160">
          <template #cell="{ record }"><DateFormat :value="record.createtime" :format="'YYYY-MM-DD HH:mm'"></DateFormat></template>
        </a-table-column>
        <a-table-column title="操作" width="180">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="viewSrmMsg(record.orderdata)"><template #icon><icon-eye /></template>查看订单内容</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-pagination class="mt10" show-total :total="state.srmDataObj.total" @change="loadSrmData" @page-size-change="loadSrmData" v-model:current="state.sd.pageNum" v-model:page-size="state.sd.pageSize"></a-pagination>

    <a-modal title="订单内容查看" v-model:visible="state.viewMsgVisible" :footer="false" width="80%">
      <JsonViewer :value="state.viewJsonData" :expanded="true" :copyable="true" :show-array-index="false" :show-double-quotes="true" :expand-depth="state.expand"></JsonViewer>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css";//引入插件样式

const state = reactive({
  sd: {
    cName:'ZB',
    typeName:'CAIGOU_MSG_PROCUREMENT_ORDER_CREATED',
    orderData:'',
    startDate:'',
    endDate:'',
    pageNum: 1,
    pageSize: 15
  },
  srmDataObj: {},

  viewJsonData:{},
  expand:10,
  viewMsgVisible : false,
})
const searchSrmData = () => {
  state.sd.pageNum = 1
  loadSrmData();
}
const loadSrmData = () => {
  axios.post('/srmmsg/listsrmmessage', state.sd).then(res => {
    const { data } = res
    state.srmDataObj = data
  })
}
const viewSrmMsg = (jsonData)=>{
  try {
    if(!jsonData){
      Message.error("消息内容未获取")
      return
    }
    state.viewJsonData =  JSON.parse(jsonData);
    state.viewMsgVisible = true
  }catch (error){
    Message.error("消息内容不正常")
  }
}

onMounted(()=>{
  loadSrmData();
})
</script>

<style scoped>

</style>
